<template>
	<view>
		<view class="head-box align-center">
			<image class="head-tx" :src="userInfo.avatar" mode="aspectFill"></image>
			<view>
				<view class="align-center">
					<view class="head-name gray3 ellipsis" style="max-width: 410rpx;">{{userInfo.nickname}}</view>
					<image class="head-dj" :src="`../../static/images/icon/`+(userInfo.grade || 0)+`g.png`"
						mode="widthFix" v-if="userInfo.grade>0"></image>
				</view>
				<view class="align-center" style="margin-top: 26rpx;">
					<view class="head-phone gray3">{{$t('common').电话}}：{{userInfo.phone}}</view>
					<image @click="bdpop=true" class="head-icon" src="../../static/images/mine/phone.png" mode="">
					</image>
				</view>
			</view>
			<view class="head-look" @click="supeInfoAPI()">{{$t('team').查看导师}}</view>
		</view>

		<view class="list-box">
			<view class=" mt15 bgWhite radius8 plr15">
				<view class=" ft15 ptb15 bdbe bold">{{$t('mine').累计销售额}}：{{teamMembers.total_sell}}</view>
				<view class="mt10 flex-row tc">
					<view class="flex1">
						<view class="ptb15">
							<text
								class="ft20">{{teamMembers.total_new_f_value?teamMembers.total_new_f_value.toLocaleString():0}}</text>
							<view class="ft12 gray6 mt5">{{$t('mine').团队本月销售额新增}}</view>
						</view>
						<view class="ptb15">
							<text class="ft20">{{teamMembers.estimatel_new_f_value || 0}}</text>
							<view class="ft12 gray6 mt5">{{$t('mine').预估本月结算销售额}}</view>
						</view>
						<!-- <view class="ptb15">
							<text class="ft20">{{teamMembers.total_sell}}</text>
							<view class="ft12 gray6 mt5">{{$t('mine').累计销售额}}</view>
						</view> -->
					</view>
					<view class="flex1">
						<view class="ptb15">
							<text
								class="ft20">{{teamMembers.total_new_f_valued?teamMembers.total_new_f_valued.toLocaleString():0}}</text>
							<view class="ft12 gray6 mt5">{{$t('mine').团队本月销售额已结算}}</view>
						</view>
						<view class="ptb15">
							<text class="ft20">{{teamMembers.estimatel_seven_f_value || 0}}</text>
							<view class="ft12 gray6 mt5">{{$t('mine').预计未来7天结算销售额}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="byks-box">
				<view class="align-center byks-head">
					<view class="byks-title gray9">{{$t('mine').本月已结算销售额排行榜}}</view>
					<!-- <u-icon name="info-circle" color="#999999" @click="showpos=true"></u-icon> -->
				</view>
				<view class="" v-if="examineList.length>0">
					<view class=" " v-for="(item,index) in examineList" :key="index">
						<view class="bgWhite align-center plr15 mb10 radius8 justify-between" style="padding-top: 14rpx;padding-bottom: 14rpx;">
							<view class="gray3 ft15 bold"><text>{{index+1}}</text></view>
							<view class="">
								<image class="radius50" :src="item.user.avatar" style="width: 80rpx;height: 80rpx;"
									mode="aspectFill"></image>
							</view>
							<view class="posRelative ">
								<view class="align-center  justify-between" style="width: 471rpx;">
									<view class="ft12 bold gray3 clamp" style="width: 240rpx;">
										<text>{{item.user.nickname}}</text>
									</view>
									<view class="ft16 bold gray3">
										<text>{{item.f_value.toLocaleString() || 0}}</text>
									</view>
								</view>
								<!-- <view @click.stop="isShowData(index)">
									大于2w
									<view class="" v-if="item.f_value>=20000">
										<view class="posRelative">
											<view class="posAbsort" style="left: 0;">
												<view class="bgGray" style="width: 471rpx;"></view>
											</view>
											<view class="posAbsort " style="left: 0;z-index: 99;">
												<view class="bgRed"
													:style="{width:(item.new_f_valued)/item.f_value*471+'rpx'}">
												</view>
											</view>
											<view class="posAbsort " style="left: 0;z-index: 9;">
												<view class="bgBlue"
													:style="{width:item.new_f_valued/item.new_f_valued*471+'rpx'}">
												</view>

											</view>
										</view>
									</view>
									小于2w
									<view class="" v-else>
										<view class="posRelative">
											<view class="posAbsort" style="left: 0;">
												<view class="bgGray" style="width: 471rpx;"></view>
											</view>
											<view class="posAbsort zIndex999" style="left: 0;z-index: 99;">
												<view class="bgRed"
													:style="{width:(item.f_value-item.add_f_value)/20000*471+'rpx'}">
												</view>
											</view>
											<view class="posAbsort" style="left: 0;z-index: 9;">
												<view class="bgBlue" :style="{width:item.f_value/20000*471+'rpx'}">
												</view>
											</view>
										</view>
									</view>
								</view> -->
								<view v-if="isShow==index"
									style="width: 300rpx;top: -54rpx;left: 50%;transform: translate(-50%);"
									class="posAbsort">
									<view class="ptb2 "
										style="width: 300rpx;height: 80rpx;background-color: #333333;opacity: 0.8;border-radius: 8rpx;">
										<view class="white ft12 align-center">
											<view class="radius50 ml5 "
												style="width: 16rpx;height: 16rpx;background: #F44A42;">
											</view>
											<view class="ml5">
												<text>月结算：{{(item.f_value-item.add_f_value).toLocaleString()}}</text>
											</view>
										</view>
										<view class="white ft12 align-center">
											<view class="radius50 ml5"
												style="width: 16rpx;height: 16rpx;background: #178FFF;">
											</view>
											<view class="ml5">
												<text>补充：{{parseFloat(item.add_f_value || 0).toLocaleString()}}</text>
											</view>
										</view>
									</view>
									<view class="san" style="width: 20rpx;margin: 0 auto;"></view>
								</view>
							</view>
							<!-- 							<view>
								<image src="../../static/images/fans/right.png" style="width: 10rpx;height: 18rpx;">
								</image>
							</view> -->
						</view>
					</view>
				</view>
				<view class="mt10 tc" v-else>
					<image src="../../static/images/empty/none.png" mode="" style="width: 520upx;height: 380upx;">
					</image>
					<view class="ft15">{{$t('common').暂无数据}}</view>
				</view>
			</view>
		</view>
		<!-- 我的导师 -->
		<u-popup :show="showteacher" @close="close" mode="center" round="8px" :safeAreaInsetBottom="false">
			<view class="bdbe ptb15">
				<view class="align-center plr15 gray6">
					<view class="ft14 mr10"><text>{{$t('index').我的导师}}:</text></view>
					<view class="align-center">
						<image class="radius50 mr10" style="width: 80rpx;height: 80rpx;" :src="myteacher.avatar"
							mode="aspectFill"></image>
						<view class="ft14 "><text>{{myteacher.nickname}}</text></view>
					</view>
				</view>
				<view class="plr15 gray6 ft14"><text>{{$t('index').手机号}}:{{myteacher.phone}}</text></view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="showteacher=false">
				<view class="ft15 light"><text>{{$t('index').确定}}</text></view>
			</view>
		</u-popup>
		<!-- 大于3000的直推粉丝 -->
		<u-popup :show="showpos" @close="close" mode="center" round="8px" :safeAreaInsetBottom="false">
			<view class="bdbe ptb15" style="width: 600rpx;">
				<view class="align-center plr15 gray6 tc">
					<text>{{$t('mine').显示该用户下本月已结算销售额大于3000的直推粉丝}}</text>
				</view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="showpos=false">
				<view class="ft15 light"><text>{{$t('index').确定}}</text></view>
			</view>
		</u-popup>
		<!-- 拨打电话 -->
		<u-popup :show="bdpop" mode="center" round="10" :safeAreaInsetBottom="false">
			<view class="qx-box">
				<view v-if="userInfo.area_code=='+86'" class="qx-text">{{$t('fandetail').确定拨打电话}}：{{userInfo.phone}}？
				</view>
				<view v-if="userInfo.area_code!='+86'" class="qx-text">
					{{$t('fandetail').确定拨打国际电话}}：{{userInfo.area_code}}
					{{userInfo.phone}}{{$t('fandetail').吗受运营商限制请确认您已开通国际长途业务如未开通将拨打失败}}
				</view>

				<view class="qx-bot align-center">
					<view class="qx-btn" style="border-right: 1rpx solid #EEEEEE;" @click="bdclose()">
						{{$t('common').取消}}
					</view>
					<view class="qx-btn" @click="bdconfirm()">{{$t('common').确认}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showteacher: false,
				showpos: false,
				uid: '',
				myteacher: {}, //我的导师
				teamMembers: {}, //团队成员信息
				examineList: [
					// {
					// 	add_f_value:1,
					// 	f_value:2,
					// 	user:{
						
					// }}
				],
				userInfo: {},
				isShow: -1,
				bdpop: false,
			}
		},

		onLoad(options) {
			this.uid = options.uid
			this.UserMonthsellAPI()
			// if (this.UserInfo.is_partner == 1) {} else {
			// 	uni.reLaunch({
			// 		url: '/pages/login/Nopermission'
			// 	})
			// }
		},
		computed: {
			UserInfo() {
				return this.$store.state.userInfo
			},
		},
		methods: {
			close() {
				this.showteacher = false
				this.showpos = false
			},
			// 我的导师接口
			async supeInfoAPI() {
				const res = await this.$api.supeInfo({
					uid: this.uid
				})
				if (res.data != '') {
					this.myteacher = res.data
					var reg = /^(\d{3})\d{4}(\d{4})$/;
					this.myteacher.phone = this.myteacher.phone.replace(reg, "$1****$2");
					this.showteacher = true
				} else {
					this.$utils.msg('暂无导师')
				}
			},
			// 团队成员信息
			//用户详情接口
			async UserMonthsellAPI() {
				const res = await this.$api.UserMonthsell({
					uid: this.uid
				})
				this.teamMembers = res.data.monthinfo
				this.examineList = res.data.list
				this.userInfo = res.data.userInfo
			},
			isShowData(index) {
				if (index == this.isShow) {
					this.isShow = -1
				} else {
					this.isShow = index
				}
			},
			// 打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.userInfo.phone
				});
			},
			bdconfirm() {
				this.bdpop = false
				this.callPhone()
			},
			bdclose() {
				this.bdpop = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.head-box {
		background: #fff;
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.head-tx {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			margin-right: 30rpx;
		}

		.head-name {
			font-size: 36rpx;
			font-weight: bold;
		}

		.head-dj {
			width: 116rpx;
			margin-left: 16rpx;
		}

		.head-phone {
			font-size: 24rpx;
			margin-right: 16rpx;
		}

		.head-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.head-look {
			width: 120rpx;
			height: 40rpx;
			color: #fff;
			font-size: 24rpx;
			background: #F44A42;
			text-align: center;
			line-height: 40rpx;
			border-radius: 100rpx 0 0 100rpx;
			position: absolute;
			right: 0;
			top: 60%;
			transform: translate(0, -50%);
		}
	}

	.list-box {
		padding: 24rpx;
		box-sizing: border-box;

		.xse-box {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 32rpx;

			.xse-title {
				height: 88rpx;
				line-height: 88rpx;
				font-size: 30rpx;
				font-weight: bold;
				border-bottom: 2rpx solid #EEEEEE;
			}

			.xse-item {
				width: 50%;
				text-align: center;

				.xse-num {
					font-size: 40rpx;
					font-weight: bold;
				}

				.xse-text {
					font-size: 24rpx;
					margin-top: 16rpx;
				}
			}
		}

		.byks-box {
			.byks-head {
				padding: 32rpx 0;

				.byks-title {
					font-size: 28rpx;
					margin-right: 12rpx;
				}
			}

			.byks-list {
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				padding: 32rpx;
				box-sizing: border-box;

				.byks-ind {
					font-size: 30rpx;
					font-weight: bold;
					margin-right: 19rpx;
				}

				.bykh-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
					margin-right: 16rpx;
				}

				.bykh-name {
					font-size: 24rpx;
					font-weight: bold;
				}

				.bykh-num {
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 12rpx;
				}
			}
		}
	}

	.san {

		border-top: 20rpx solid #333333;
		border-bottom: 0rpx solid transparent;
		border-left: 20rpx solid transparent;
		border-right: 20rpx solid transparent;
		opacity: 0.8;
	}

	.bgGray {
		height: 10rpx;
		background: #FEF6F5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.bgBlue {
		height: 10rpx;
		background: #178FFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.bgRed {
		height: 10rpx;
		background: #F44A42;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.qx-box {
		width: 600rpx;
		// height: 246rpx;
		background: #ffffff;
		border-radius: 10rpx;

		.qx-text {
			color: #2A2A2A;
			font-size: 30rpx;
			padding: 56rpx 40rpx;
			text-align: center;
		}

		.qx-bot {
			border-top: 2rpx solid #EEEEEE;

			.qx-btn {
				width: 50%;
				height: 92rpx;
				text-align: center;
				line-height: 80rpx;
				color: #2A2A2A;
				font-size: 30rpx;
			}
		}
	}
</style>